<!DOCTYPE html>
<html lang="en">
<head>
	
	<meta charset="utf-8">
	<title>HTML5 Game Maker</title>
	
	<link rel="stylesheet" 				href="assets/css/reset.css" type="text/css" media="screen" />
	<link rel="stylesheet" 				href="assets/css/maker.css" type="text/css" media="screen" />
	<script src="src/js/libs/utils.js" 	type="text/javascript"></script>
	<script src="src/js/libs/nd.js" 	type="text/javascript"></script>
	<script src="src/js/libs/mvc.js" 	type="text/javascript"></script>
	<script src="src/js/maker.js" 		type="text/javascript"></script>
	
</head>
<body>

	<div class="header">
		<h1>HTML5 Game Maker</h1>
	</div>
	
	
	<div class="topMenu" id="topMenu">
		
		<ul class="links horizontal">
			<li>
				<a href="#" id="file">File</a>
				<ul class="links vertical" id="fileSub">
					<li><a href="#" id="new">New Project</a></li>
					<li><a href="#" id="open">Open Project</a></li>
					<li><a href="#" id="save">Save Project</a></li>
					<li><a href="#" id="close">Close Project</a></li>
				</ul>
			</li>
			<li>
				<a href="#" id="events">Events</a>
				<ul class="links vertical" id="eventSub"></ul>
			</li>
			<li>
				<a href="#" id="database">Database</a>
				<ul class="links vertical" id="dbSub"></ul>
			</li>
			<li>
				<a href="#" id="system">System</a>
				<ul class="links vertical" id="sysSub"></ul>
			</li>
			<li>
				<a href="#" id="help">Help</a>
				<ul class="links vertical" id="helpSub"></ul>
			</li>
		</ul>

	</div>
	
	<div class="mainScreen">		

		<!-- paste your template here -->
		
		<div class="library" id="libraryWindow">
	
			<h2>Animations</h2>
			<canvas class="preview" id="preview"></canvas>
			
			<ul class="dataList" 	id="animationList">
			</ul>
			
		</div>

		<div class="uiContainer" 	id="uiContainer">
		</div>
		
		<div class="layersWindow" 	id="layersWindow">
			
			<h2>Layers</h2>
			
			<button class="actionButton" id="addLayerButton">Add Layer</button>
			<button class="actionButton" id="removeLayerButton">Remove Layer</button>
			
			<ul class="dataList"	id="layersList"></ul>
			
		</div>
		
		<div class="mapsWindow" 	id="mapsWindow">
			
			<h2>Maps</h2>
						
			<button class="actionButton" id="addMapButton">Add Map</button>
			<button class="actionButton" id="removeMapButton">Remove Map</button>
			
			<ul class="dataList"	id="mapsList">
				<li><a href="#" 	>Home</a></li>
				<li><a href="#"  	>Church</a></li>
				<li><a href="#"  	>Tree</a></li>
				<li><a href="#"  	>House</a></li>
				<li><a href="#" 	>Cave</a></li>
				<li><a href="#"  	>SpaceShip</a></li>
				<li><a href="#"  	>Tortuga</a></li>
				<li><a href="#"  	>Alamut</a></li>
				<li><a href="#" 	>Bordeciel</a></li>
				<li><a href="#"  	>Valadiel</a></li>
			</ul>

			
		</div>
		
		
	</div>
	

	
	<div class="openProjectLayout" id="openProjectLayout">
		<label>Project file path:</label>
		<input type="text" name="projectFilePath" id="projectFilePath" value="" />
		<button id="openProjectButton">Open</button>
	</div>
	
</body>
</html>